<template>
	<el-form :model="elForm" label-width="128px" ref="elForm">
		<fieldset>
			<legend>基本信息</legend>
			<el-form-item :rules="FormRule.Select" class="is-required" label="项目分类：" prop="class">
				<el-select clearable placeholder="请选择项目分类" v-model="elForm.class">
					<!--1 '内部',2'外部'-->
					<el-option :key="item" :label="item" :value="idx+1" v-for="(item,idx) in project_class"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item :rules="FormRule.Select" class="is-required" label="项目类型：" prop="type">
				<el-select clearable placeholder="请选择项目类型" v-model="elForm.type">
					<!--1'硬件',2'软件',3'云平台', 4'PC软件'-->
					<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in project_type"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item :rules="FormRule.NotNull" class="is-required" label="客户名称：" prop="customer">
				<el-input clearable maxlength="50" placeholder="请输入客户名称" v-model.trim="elForm.customer"></el-input>
			</el-form-item>
			<el-form-item :rules="FormRule.NotNull" class="is-required" label="项目名称：" prop="project_name">
				<el-input clearable maxlength="50" placeholder="请输入项目名称" v-model.trim="elForm.project_name"></el-input>
			</el-form-item>
			<el-form-item label="上传附件：" prop="imgSrc">
				<div class="fileImgBox" style="position:absolute;width:100%;">
					<img :src="elForm.imgSrc" :style="{ width: elForm.imgSrc == '/img/fileImg-bj.png' ? '50%' : '100%' }" />
					<input @change="fileImage($event, -1)" type="file" v-if="isFile" />
				</div>
			</el-form-item>
			<el-form-item :rules="FormRule.Select" class="is-required" label="期望立项日期：" prop="date1">
				<el-date-picker	v-model="elForm.date1" type="date" placeholder="请选择期望立项日期"></el-date-picker>
			</el-form-item>
			<el-form-item :rules="FormRule.Select" class="is-required" label="期望样机日期：" prop="date2">
				<el-date-picker	v-model="elForm.date2" type="date" placeholder="请选择期望样机日期"></el-date-picker>
			</el-form-item>
			<el-form-item :rules="FormRule.Select" class="is-required" label="预计结项日期：" prop="date3">
				<el-date-picker	v-model="elForm.date3" type="date" placeholder="请选择预计结项日期"></el-date-picker>
			</el-form-item>
			<el-form-item :rules="FormRule.NotNull" class="is-required" label="研发负责人：" prop="user">
				<el-input clearable maxlength="50" placeholder="请输入研发负责人" v-model.trim="elForm.user"></el-input>
			</el-form-item>
			<el-form-item></el-form-item>
			<el-form-item :rules="FormRule.NotNull" class="is-required" label="应用方向：" prop="title">
				<el-input clearable maxlength="50" placeholder="请输入应用方向" v-model.trim="elForm.title"></el-input>
			</el-form-item>
			<el-form-item :rules="FormRule.NotNull" class="is-required" label="业绩潜力：" prop="title">
				<el-input clearable maxlength="50" placeholder="请输入业绩潜力" v-model.trim="elForm.title"><span style="color:black;" slot="suffix">万元</span></el-input>
			</el-form-item>
			<el-form-item label="备注：" prop="remark">
				<el-input clearable maxlength="50" placeholder="请输入备注" v-model.trim="elForm.remark"></el-input>
			</el-form-item>
		</fieldset>
		<fieldset>
			<legend>需求描述</legend>
			<el-form-item :rules="FormRule.NotNull" class="is-required textarea" prop="note">
				<!-- <div class="content" :key="`index_${i}`" v-for="(item, i) in elForm.description">
					<el-input clearable maxlength="50" placeholder="需求明细" v-model.trim="item.content"></el-input>
					<el-button
						@click="remove(i)"
						circle
						icon="el-icon-delete"
						style="margin-left:20px;"
						type="danger"
						v-if="item.type == 'text' && elForm.description.length != 1"
					></el-button>
					<el-button
						@click="addInfo(i)"
						circle
						icon="el-icon-edit"
						style="margin-left:20px;"
						type="primary"
						v-if="elForm.description.length == (i+1)"
					></el-button>
				</div> -->
				<el-input :rows="3" type="textarea" clearable maxlength="1000" placeholder="需求明细" v-model="elForm.note"></el-input>
			</el-form-item>
		</fieldset>
		<el-form-item class="el-btn-box">
			<el-button @click="confirm" class="el-btn" icon="el-icon-check" type="primary">提交立项申请</el-button>
			<el-button @click="cancel" class="el-btn" icon="el-icon-close" type="info">取消</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	name: 'project',
	data() {
		return {
			type: '',
			articleType: '1',
			id: '',
			project_class: ['内部','外部'],
			project_type: [{id: 1, name: '硬件'}, {id: 2, name: '软件'}, {id: 3, name: '云平台'}, {id: 4, name: 'PC软件'}],
			elForm: {
				description: [
					{
						pid: 1,
						content: '',
						type: 'text'
					}
				],
				imgSrc: '/img/fileImg-bj.png',
				class: '',
				type: '',
				customer: '',
				project_name: '',
				date1: '',
				date2: '',
				date3: '',
				user: '',
				remark: '',
				title: '',
				note: ''
			},
			isFile: true
		};
	},
	methods: {
		SubEvents(type, data) {
			this.type = type
			// this.$popup.maxHeight();
			this.elForm = {...this.elForm,...data}
		},
		GetData() {
			let description = JSON.parse(JSON.stringify(this.elForm.description));
			for (let i = 0; i < description.length; i++) {
				if (description[i].type == 'img') {
					delete description[i].img_src;
				}
			}
			let data = {
				type: Number(this.articleType),
				id: this.id,
				index_img_url: this.elForm.index_img_url,
				title: this.elForm.title,
				detail: description
			};
			this.$http.APIASK('/course/save', 'post', data)
			.then(data => {
				if (data&&data.code == 0) {
					this.$emit('confirm', false);
					if (this.type == 0) {
						this.$message({
							message: 'ok',
							type: 'success'
						});
					} else {
						this.$message({
							message: 'ok',
							type: 'success'
						});
					}
				}
			});
		},
		RadioChange(e) {
			if (e == 1) {
				this.articleType = 1;
			} else {
				this.articleType = 2;
			}
		},
		GetFile(formdata, i) {
			this.$api.Upload(formdata)
			.then(data => {
				if (data&&data.code == 0) {
					this.$message({
						message: '成功',
						type: 'success'
					});
					if (i == -1) {
						this.elForm.index_img_url = data.data.path;
					} else {
						this.elForm.description[i].content = data.data.path;
					}
				} else {
					if (i == -1) {
						this.elForm.imgSrc = '';
					} else {
						this.elForm.description[i].img_src = '';
					}
				}
			});
		},
		fileImage(e, i) {
			let file = e.target.files[0];
			let format = file.name.split('.')[1];
			if (format == 'jpg' || format == 'jpeg' || format == 'png') {
				let formdata = new FormData();
				formdata.append('file', file);
				this.GetFile(formdata, i);
				let _this = this;
				let reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(evt) {
					if (i == -1) {
						_this.elForm.imgSrc = evt.target.result;
					} else {
						_this.elForm.description[i].img_src = evt.target.result;
					}
				};
				this.isFile = false;
				this.$nextTick(() => {
					this.isFile = true;
				});
			} else {
				this.$message.error('error');
			}
		},
		addInfo() {
			this.elForm.description.push({
				pid: '',
				type: 'text',
				content: ''
			});
		},
		remove(i) {
			if (this.elForm.description.length > 1) {
				this.elForm.description.splice(i, 1);
			} else {
				this.$message.error('error');
			}
		},
		imgClick(i) {
			this.$refs.file[i].dispatchEvent(new MouseEvent('click'));
		},
		confirm() {
			this.$refs['elForm'].validate(valid => {
				if (valid) {
					this.GetData();
				} else {
					return false;
				}
			});
		},
		cancel() {
			this.$emit('cancel', false);
		}
	}
};
</script>
<style scoped lang="scss">

	fieldset {
		border: 1px solid #ccc;
		border-radius: 10px;
		padding: 0px 30px 30px;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20px;
		legend {
			margin-left: 30px;
		}
		>div {
			width: 20%;
			&:nth-of-type(1) {
				margin-top: 24px!important;
			}
			&:last-child {
				width: 60%;
				&.textarea {
					width: 80%;
				}
			}
			.el-date-editor.el-input {
				width: 100%;
			}
		}
	}
	.el-btn-box {
		width: 30%;
		margin: 0 auto;
	}
.content {
	position: relative;
	display: flex;
	margin-top: 14px;
	align-items: flex-start;
}

.content:nth-of-type(1) {
	margin: 0;
}

.content img {
	display: block;
	width: 316px;
	border-radius: 5px;
	cursor: pointer;
}

.file {
	position: absolute;
	left: 1000px;
}
</style>
